<template>
  <div class="app-container">
    <el-steps :active="active" finish-status="success" align-center>
      <el-step
        v-for="(i, f) in stepsTitle"
        :key="f"
        :title="f == active ? '进行中' : i.title"
        :description="f == active ? 'in progress' : i.description"
        @click.native="handleClickStep(f)"
      ></el-step>
    </el-steps>
    <div class="main">
      <hello-world1
        v-if="active == 0"
        :data="form"
        ref="submitOneForm"
      ></hello-world1>
      <hello-world2
        v-if="active == 1"
        :data="form"
        ref="submitTwoForm"
      ></hello-world2>
      <hello-world3
        v-if="active == 2"
        :data="form"
        ref="submitThreeForm"
      ></hello-world3>
      <hello-world4
        v-if="active == 3"
        :data="form"
        ref="submitFourForm"
      ></hello-world4>
      <hello-world5
        v-if="active == 4"
        :data="form"
        ref="submitFiveForm"
      ></hello-world5>
    </div>
    <div class="buttonBox">
      <el-button
        @click.prevent="handleClick('prev')"
        v-if="active > 0"
        size="medium"
        >上一步</el-button
      >
      <el-button
        type="primary"
        @click.prevent="handleClick('next')"
        size="medium"
        v-loading="loading"
        >{{ active < stepsTitle.length - 1 ? "下一步" : "完成" }}</el-button
      >
    </div>
  </div>
</template>

<script>
import HelloWorld1 from "../components/HelloWorld1";
import HelloWorld2 from "../components/HelloWorld2";
import HelloWorld3 from "../components/HelloWorld3";
import HelloWorld4 from "../components/HelloWorld4.vue";
import HelloWorld5 from "../components/HelloWorld5";
import {
  getTaskCheck,
  addTaskCheck,
  updateTaskCheck,
} from "@/api/console/taskCheck";

const removeValue = ["start", "end"];

const refsArray = [
  "submitOneForm",
  "submitTwoForm",
  "submitThreeForm",
  "submitFourForm",
  "submitFiveForm",
];
export default {
  name: "taskMain",
  components: {
    HelloWorld3,
    HelloWorld2,
    HelloWorld1,
    HelloWorld4,
    HelloWorld5,
  },
  data() {
    return {
      loading: false,
      form: {},
      active: 0,
      stepsTitle: [
        {
          title: "基本信息",
          description: "请基本信息",
        },
        {
          title: "选择数据源",
          description: "源库及目标库设置",
        },
        {
          title: "配置任务对象",
          description: "配置所选对象配置",
        },
        {
          title: "预检查",
          description: "配置预检查",
        },
        {
          title: "配置信息预览",
          description: "同步任务配置汇总预览",
        },
      ],
      id: null,
    };
  },
  created() {},
  async mounted() {
    this.$route.meta.title = this.$route.query.id
      ? "修改校验任务"
      : "新增校验任务";
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      const { data } = await getTaskCheck({ id: this.$route.query.id });
      data.start = data.taskType.split("-")[0];
      data.end = data.taskType.split("-")[1];
      data.taskTables = JSON.parse(data.taskTables);
      data.monitorConf = JSON.parse(data.monitorConf);
      data.strategy = String(data.strategy);
      data.monitorStatus = data.monitorStatus == "0" ? false : true;
      data.status =
        Number(data.status) > 1 ? "0" : String(data.status);
      this.form = data;
    }
  },
  methods: {
    handleClick(status) {
      let that = this;
      let leg = that.stepsTitle.length - 1;
      const fun = {
        next() {
          if (that.active == 4) {
            that.loading = true;
            that.dataFusion(that.form);
            return;
          }
          if (that.active++ > leg) that.active = leg;
        },
        prev() {
          if (that.active-- < 0) that.active = leg;
        },
      };
      if (
        status == "next" &&
        !this.id &&
        this.$refs[refsArray[this.active]].$refs.form
      ) {
        this.$refs[refsArray[this.active]].$refs.form.validate((valid) => {
          if (valid) {
            fun[status]();
            return;
          }
        });
        return;
      }
      fun[status]();
      return false;
    },
    async dataFusion(form) {
      form.taskType = `${form.start}-${form.end}`;
      form.taskTables = JSON.stringify(form.taskTables || []);
      form.monitorConf = JSON.stringify(form.monitorConf || {});
      form.monitorStatus = form.monitorStatus ? 1 : 0;
      if (this.id) {
        form.id = this.id;
      }
      // if (form.start == "ORACLE") {
      //   form.sourceDataSchema = form.sourceDatabase;
      //   delete form.sourceDatabase;
      // }
      // if (form.end == "DAMENG") {
      //   form.sinkDataSchema = form.sinkDatabase;
      //   delete form.sinkDatabase;
      // }

      removeValue.forEach((f) => delete form[f]);
      try {
        let res = this.id
          ? await updateTaskCheck(form)
          : await addTaskCheck(form);

        this.$message.success(res.msg);
        this.loading = false;

        setTimeout(() => {
          this.$router.push("/taskCheck");
        }, 500);
      } catch (error) {
        this.$message.success(error.msg);
        this.loading = false;
      }
      return false;
    },
    handleClickStep(f) {
      if (this.active >= f || this.$route.query.id) {
        this.active = f;
        return;
      }
    },
  },
};
</script>
<style scoped lang="scss">
.app-container {
  width: 80%;
  margin: 0 auto;
  .buttonBox {
    margin: 40px auto;
    width: 87%;
    text-align: center;
  }

  .main {
    width: 87%;
    margin: 0 auto;
  }
}
</style>
